<template>
    <!-- 各项信息 -->
    <div class="top">
        <!-- 用户数量 -->
        <el-card class="card-box">
            <div class="image"><img src="../assets/images/users.png"></div>
            <div class="info">
                <div class="title">用户数量</div>
                <div class="num">{{userTotal}}</div>
            </div>
        </el-card>
        <!-- 单元数量 -->
        <el-card class="card-box">
            <div class="image"><img src="../assets/images/builds.png"></div>
            <div class="info">
                <div class="title">单元数量</div>
                <div class="num">{{unitTotal}}</div>
            </div>
        </el-card>
        <!-- 新闻数量 -->
        <el-card class="card-box">
            <div class="image"><img src="../assets/images/news.png"></div>
            <div class="info">
                <div class="title">新闻数量</div>
                <div class="num">{{newsTotal}}</div>
            </div>
        </el-card>
        <!-- 交易数量 -->
        <el-card class="card-box">
            <div class="image"><img src="../assets/images/payment.png"></div>
            <div class="info">
                <div class="title">交易数量</div>
                <div class="num">{{dealTotal}}</div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import { selectAll as selectUser } from '@/api/user'
    import { selectAll as selectUnit } from '@/api/unit'
    import { selectAll as selectNews } from '@/api/news'
    import { selectAll as selectDeal } from '@/api/deallog'
    export default {
        name: 'Dashboard',
        data(){
            return{
               queryForm:{
                pageNum:1,
                pageSize:1
               },
               userTotal:0,
               unitTotal:0,
               newsTotal:0,
               dealTotal:0
            }
        },
        //创建网页后查询调用数据
        created(){
           this.getList()
        },
        methods:{
            //调用接口分页查询用户数据
            getList(){
                selectUser(this.queryForm).then(res=>{
                    this.userTotal = res.data.total
                }).catch(err=>{})
                selectUnit(this.queryForm).then(res=>{
                    this.unitTotal = res.data.total
                }).catch(err=>{})
                selectNews(this.queryForm).then(res=>{
                    this.newsTotal = res.data.total
                }).catch(err=>{})
                selectDeal(this.queryForm).then(res=>{
                    this.dealTotal = res.data.total
                }).catch(err=>{})
            },
        }
    }
    
</script>

<style scoped>
   .top{
    display: flex;
    justify-content: space-around;
   }
   .card-box{
    width: 23%;
   }
   .card-box div{
    vertical-align: middle;
    display: inline-block;
   }
   .image img{
    margin-left: 20px;
    height: 120px;
    width: 120px;
   }
   .info{
    margin-left: 60px;
   }
   .card-box .info div{
    display: block;
   }
   .info .title{
    color:#747474;
    margin-left: 5px;
   }
   .info .num{
    font-size: 48px;
    font-weight: bolder;
   }
   
</style>